<template>
    <div id="marking" class="jx-content">
        <!-- 查重设置弹出框 -->
        <el-dialog :close-on-click-modal="false" class="dialog-check" title="查重设置" :visible.sync="dialogCheck" width="480px">
            <p class="check-tishi">
                <i class="el-icon-warning"></i>批量控制所有学生提交的实验报告重复率检查比率
            </p>
            <p class="dialog-b">实验报告代码查重校验
                <el-switch v-model="searchForm.dialogCheckSwitch"></el-switch>
            </p>
            <p v-if="searchForm.dialogCheckSwitch">
                实验报告相似度高于
                <el-select class="short-input" v-model="searchForm.repeatVal" placeholder="请选择">
                    <el-option v-for="item in optionsRepeat" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <!-- <el-input @keyup.native="proving(searchForm,'repeatVal')" class="short-input" v-model="searchForm.repeatVal"></el-input> -->
            </p>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="sameSet">保存</el-button>
            </span>
        </el-dialog>
        <div class="search-box fl">
            <el-form :inline="true" ref="searchForm" :model="searchForm">
                <el-form-item label="班级信息 :" class="classInfo">
                    <el-cascader class="cascader" :options="data" expand-trigger="hover" :props="cascaderconfig" change-on-select v-model="selectedOptions" @change="handleChange"></el-cascader>
                </el-form-item>
                <el-form-item style="padding-right:20px;">
                    <div @click="search" class="button-style" >搜 索</div>
                </el-form-item>
                <el-form-item label="批阅类型" class="classInfo" >
                    <el-radio-group v-model="searchForm.radio">
                        <el-radio :label="1" @change='search'>随堂练习</el-radio>
                        <el-radio :label="2" @change='search'>实验报告</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn-group fr">
            <el-form :inline="true">
                <el-form-item>
                    <div @click="downloadFile" class="button-style" style="margin-right: 8px;" :loading="downloadStatus" :text="downloadText">归档下载</div>
                    <div @click="dialogCheck = true" class="button-style">查重设置</div>
                </el-form-item>
            </el-form>
        </div>
        <div class="clear"></div>
        <div class="c-btn-blue">注：此列表按照默认班级检索</div>
        <div v-if="tableDatas && searchForm.radio == 1" >
            <el-table :data="tableDatas" style="width: 100%">
                <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                <el-table-column type="index" width="50" label="序号"></el-table-column>
                <el-table-column prop="name" label="班级名称">
                    <template slot-scope="scope">
                        <div class="beyond-hiding" :title="scope.row.name">{{ scope.row.name }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="grade" label="年级"></el-table-column>
                <el-table-column prop="endMessage" label="班级状态"></el-table-column>

                <el-table-column prop="chapterName" label="章节">
                    <template slot-scope="scope">
                        <div class="beyond-hiding" :title="scope.row.chapterName">{{ scope.row.chapterName }}</div>
                    </template>
                </el-table-column>

                <el-table-column width="275" label="提交进度" >
                    <template slot-scope="scope">
                        <div class="progress-box">
                            <div class="progress-line">
                                <el-progress color="#385899"
                                    :show-text="false"
                                    :text-inside="true"
                                    :percentage="Number(scope.row.proportion)">
                                </el-progress>
                            </div>
                            <div>已交{{ scope.row.count }}/{{ scope.row.total }}人</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <div class="table-button">
                            <router-link v-if="resRadio === 1" :to="{path:'/Teaching/MyCourses/studentsSubmitDetailsList',query:{id:scope.row.id,chapterId:scope.row.chapterId}}">学生提交详情</router-link>
                            <router-link v-else :to="{path:'/Teaching/MyCourses/studentsSubmitDetailsListTest',query:{id:scope.row.id,chapterId:scope.row.chapterId}}">学生提交实验详情</router-link>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" width="80" v-if="tableDatas.length>0">
                    <template slot="header" slot-scope="slot">
                        <el-tooltip content="点击关闭/开启学生端当前课程全部随堂练习答案" placement="bottom">
                            <el-switch
                            style="line-height:0;margin-left:13px;"
                                @change="updateSwitchAll"
                                v-model="switchAll">
                            </el-switch>
                        </el-tooltip>
                    </template>
                    <template slot-scope="scope">
                        <div>
                            <el-tooltip :content="contentItem(scope.row.switchOn)" placement="bottom">
                                <el-switch
                                    @change="updateSwitch(scope.row)"
                                    v-model="scope.row.switchOn">
                                </el-switch>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" layout="total, prev, pager, next, jumper" :total="totalCount">
            </el-pagination> -->
        </div>
        <div v-if="tableDatas2 && searchForm.radio == 2">
            <el-table :data="tableDatas2" style="width: 100%">
                <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                <el-table-column type="index" width="50" label="序号"></el-table-column>
                <el-table-column prop="name" label="班级名称">
                    <template slot-scope="scope">
                        <div class="beyond-hiding" :title="scope.row.name">{{ scope.row.name }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="grade" label="年级"></el-table-column>
                <el-table-column prop="endMessage" label="班级状态"></el-table-column>


                <el-table-column prop="chapterName" label="章节/任务名称" >
                    <template slot-scope="scope">
                        <div class="beyond-hiding" :title="scope.row.chapterName">{{ scope.row.chapterName }}</div>
                    </template>
                </el-table-column>
                <el-table-column width="275" label="提交进度" >
                    <template slot-scope="scope">
                        <!-- {{scope.row}}-2 -->
                        <div class="progress-box">
                            <div class="progress-line">
                                <el-progress color="#385899"
                                    :show-text="false"
                                    :text-inside="true"
                                    :percentage="Number(scope.row.proportion)">
                                </el-progress>
                            </div>
                            <div>已交{{ scope.row.count }}/{{ scope.row.total }}人</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <div class="table-button">
                            <router-link v-if="resRadio === 1" :to="{path:'/Teaching/MyCourses/studentsSubmitDetailsList',query:{id:scope.row.id,chapterId:scope.row.chapterId}}">学生提交详情</router-link>
                            <router-link v-else :to="{path:'/Teaching/MyCourses/studentsSubmitDetailsListTest',query:{id:scope.row.id,chapterId:scope.row.chapterId}}">学生提交实验详情</router-link>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" layout="total, prev, pager, next, jumper" :total="totalCount">
            </el-pagination> -->
        </div>
    </div>
</template>
<script>
    import axios from "axios";
    import $ from "jquery";
    export default {
        data() {
            return {
                idList: [],
                optionsRepeat: [
                    {
                        value: 90,
                        label: "90%"
                    },
                    {
                        value: 80,
                        label: "80%"
                    },
                    {
                        value: 70,
                        label: "70%"
                    },
                    {
                        value: 60,
                        label: "60%"
                    },
                    {
                        value: 50,
                        label: "50%"
                    },
                    {
                        value: 40,
                        label: "40%"
                    },
                    {
                        value: 30,
                        label: "30%"
                    },
                    {
                        value: 20,
                        label: "20%"
                    },
                    {
                        value: 10,
                        label: "10%"
                    }
                ],
                a: 20,
                //三级配置初始化
                cascaderconfig: {
                    value: "name",
                    label: "name"
                },
                //
                resRadio: 1,
                //查重设置弹出
                dialogCheck: false,
                //查重设置下拉菜单
                dialogCheckOption: 11,
                searchForm: {
                    //信息
                    info: "",
                    //年份
                    chooseYear: "",
                    optionsYear: [],
                    //班级
                    chooseClass: "",
                    optionsclass: [],
                    //状态
                    choosestatus: "",
                    optionstatus: [],

                    radio: 1,
                    //查重百分比
                    repeatVal: 90,
                    //查重设置弹出开关
                    dialogCheckSwitch: true
                },
                data: [],
                //获取列表数据
                tableDatas: [],
                selectedOptions: [],
                //currentPage: 1,
               // pagesize: 10,
                //totalCount: 1000,

                //yx
                statusArr: this.$route.query.classArr,
                reportArr: this.$route.query.reportArr,
                tableDatas2:[],


                // 二期新增
                downloadStatus: false,
                downloadText: '归档下载',
                switchAll:false,
            };
        },
        created() {
            this.statusArr= this.$route.query.classArr,
            this.reportArr= this.$route.query.reportArr,
            this.ClassList();
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.sameInit();
            },
            contentItem(switchType){
                if(switchType){
                    return '点击关闭学生随堂练习答案';
                }
                else{
                    return '点击开启学生随堂练习答案';
                }
            },
            //修改权限-全部修改
            updateSwitchAll() {
                let self = this;
                let switchAll = self.switchAll;
                let tableDatas = self.tableDatas;
                let objIds = tableDatas.map(item=>item.chapterId);
                let obj = {
                    code:'practice_answer_control',
                    objIds:objIds,
                    switchOn:switchAll,
                };
                axios.post("/tes/user/permission",obj).then(response => {
                    let res = response.data;
                    if (res.code == "200") {
                        let str = '';
                        //开
                        if(switchAll){
                            str = '学生端当前课程全部随堂练习答案已开启';
                        }
                        //关
                        else{
                            str = '学生端当前课程全部随堂练习答案已关闭';
                        }
                        self.$message.success(str);
                        self.search();
                    } else {
                        self.$message.error(res.message);
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //修改权限
            updateSwitch(row) {
                let self = this;
                let objIds = [];
                let switchOn = row.switchOn;
                objIds.push(row.chapterId);
                let obj = {
                    code:'practice_answer_control',
                    objIds:objIds,
                    switchOn:switchOn,
                };
                console.log(row);
                axios.post("/tes/user/permission",obj).then(response => {
                    let res = response.data;
                    if (res.code == "200") {
                        let str = '';
                        //开
                        if(switchOn){
                            str = '学生端当前章节随堂练习答案已开启';
                        }
                        //关
                        else{
                            str = '学生端当前章节随堂练习答案已关闭';
                        }
                        self.$message.success(str);
                    } else {
                        self.$message.error(res.message);
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            cascaderChange(val) {
                console.log(this.selectedOptions, 666);
            },
            /********************************************************验证*****************************************/
            //限制查重设置input 正整数 不能大于100
            proving(item, prop) {
                let that = this;
                let reg = /^[0-9]+$/;
                let isInt = reg.test(item[prop]);

                if (!isInt) {
                    item[prop] = "";
                    that.$message({
                        type: "warning",
                        message: "只能输入整数"
                    });
                }
                if (item[prop] > 100) {
                    item[prop] = "";
                    that.$message({
                        type: "warning",
                        message: "查重百分比不能大于100%"
                    });
                }
            },
            /********************************************************验证*****************************************/
            sameInit() {
                let self = this;
                axios.get("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/check/duplicate-percent").then(response => {
                    let res = response.data;
                    if (res.code == "200") {
                        self.searchForm.dialogCheckSwitch = res.data.checkReportDuplicate;
                        self.searchForm.repeatVal = res.data.reportDuplicatePercent;
                    } else {
                        self.$message.error(res.message);
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //三级联动的清空
            handleChange(){

            },
            //查重设置
            sameSet() {
                let self = this;
                let obj = {
                    checkReportDuplicate: self.searchForm.dialogCheckSwitch,
                    reportDuplicatePercent: self.searchForm.repeatVal
                };
                axios.post("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/check/duplicate-percent",obj).then(response => {
                    let res = response.data;
                    if (res.code == "200") {
                        self.$message.success("保存成功");
                        self.dialogCheck = false;
                    } else {
                        self.$message.error(res.message);
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //三级联动
            ClassList() {
                let self = this;

                self.$http.get("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/search/list-class?allFlag=true").then(response => {
                    let res = response.data;
                    if (res.code == "200") {
                        self.data = res.data;
                        //console.log(this.statusArr,88)  //随堂练习
                        //console.log(this.reportArr,99)  //实验报告
                        //随堂练习
                        if (self.statusArr) {
                            self.searchForm.radio = 1;
                            self.selectedOptions = self.statusArr.split(",");
                            console.log(self.selectedOptions, 66);

                        } else if (self.reportArr) {
                            self.searchForm.radio = 2;
                            self.selectedOptions = self.reportArr.split(",");
                            // console.log(self.reportArr, 88);

                        }
                        // else {
                        //     // self.filterInitData(res.data);
                        // }
                        else {
                            self.selectedOptions = []

                        }

                        self.filterInitData(res.data);
                        self.ChangeList();

                    } else {
                        self.$message.error(res.message);
                    }
                });
            },
            //过滤数据获得默认值
            filterInitData(data) {
                let self = this;
                console.log(self.selectedOptions, 199);
                data.forEach(function(item) {
                    if (item.defaultedClass == true) {
                        self.selectedOptions.push(item.name);
                    }
                    if (item.children) {
                        item.children.forEach(function(it) {
                            if (it.defaultedClass == true) {
                                self.selectedOptions.push(it.name);
                            }
                            if (it.children) {
                                it.children.forEach(function(itChild) {
                                    if (itChild.defaultedClass == true) {
                                        self.selectedOptions.push(itChild.name);
                                    }
                                });
                            }
                        });
                    }
                });

                return self.selectedOptions;
            },
            //获取id集合
            ChangeList() {
                let self = this;

                if(self.selectedOptions[0] === 'false'){
                    self.selectedOptions[0] = '未结课';
                }
                // if(self.reportArr[0] === 'false'){
                //     self.selectedOptions[0] = '未结课';
                // }
                 console.log( self.selectedOptions,58)
                if (self.selectedOptions[0] === undefined || self.selectedOptions[0] == "全部") {
                    self.selectedOptions[0] = "";
                    self.selectedOptions[1] = "";
                    self.selectedOptions[2] = "";
                } else if (self.selectedOptions[1] === undefined || self.selectedOptions[1] == "全部") {
                    self.selectedOptions[1] = "";
                    self.selectedOptions[2] = "";
                } else if (self.selectedOptions[2] === undefined || self.selectedOptions[2] == "全部") {
                    self.selectedOptions[2] = "";
                }

                self.$http.post("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/search/class",{
                    status: self.selectedOptions[0],
                    grade: self.selectedOptions[1],
                    name: self.selectedOptions[2]
                }).then(response => {
                    let res = response.data;
                    if (res.code == "200") {
                        // console.log(res.data, 1111);
                        self.idList = res.data;
                        // console.log(self.idList, 222);
                        //成功后的回调
                        if(self.searchForm.radio == 1){

                            self.getList();
                        }else if(self.searchForm.radio == 2){
                            self.getList2()
                        }


                    }
                    //  else if (res.code == "404") {
                    //     self.$message(res.message);
                    // }
                     else {
                        self.$message.error(res.message);
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
			//获取列表
			//去掉分页
            getList() {
                let self = this;
                let result = self.idList;
                self.tableDatas2 = []
                axios.post("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/check",{
                    //此处课程id是假定的值！！！
                    type: 1,
                    classIdList: result
                }).then(response => {
                    let res = response.data;
                    if (res.code == "200") {
                        if(res.data){
                              self.tableDatas = res.data;

                        }
                         self.searchForm.radio = 1
                        // self.totalCount = res.data.total;
                          self.resRadio = 1;
                    } else {
                        //self.$message.error(res.message);
                        self.tableDatas = []
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            getList2() {
                let self = this;
                let result = self.idList;
                self.tableDatas1 = []
                self.tableDatas2 = []
                axios.post("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/check",{
                    //此处课程id是假定的值！！！
                    type:2,
                    classIdList: result
                }).then(response => {
                    let res = response.data;
                    if (res.code == "200") {
                        if(res.data){
                            self.tableDatas2 = res.data;

                        }
                        self.searchForm.radio = 2
                        // self.totalCount = res.data.total;
                          self.resRadio = 2;
                    } else {
                        //self.$message.error(res.message);
                        self.tableDatas2 = []
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //处理数据返给后台方法
            Change() {},

             //搜索
            search(val) {
                this.ChangeList();
                // this.currentPage = 1
                //this.getList();
            },
            //分页
            handleSizeChange: function(size) {
                this.pagesize = size;
            },
            handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage;
                this.ChangeList();
            },
            //全选
			// handleSelectionChange(val) {
			// 	let valArr = []
			// 	for(let i = 0; i < val.length; i++){
			// 		valArr.push(val[i].id)
			// 	}
            //     this.multipleSelection = valArr
            // },
            // 归档下载
            downloadFile(){
                let self = this
                self.$http.post('/tes/course/'+self.$localstorage.getLocalStorage("setCourseId")+'/check/archive-check',{
                    classIdList: self.idList,
                    type: self.searchForm.radio
                }).then(response => {
                    let res = response.data
                    if(res.code === 200){
                        self.downloadFilePost()
                    }else {
                        self.$message.error(res.message)

                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            downloadFilePost(){
                let self = this
                self.downloadStatus = true
                self.downloadText = '压缩中'
                self.$http.post('/tes/course/'+self.$localstorage.getLocalStorage("setCourseId")+'/check/archive',{
                    classIdList: self.idList,
                    type: self.searchForm.radio
                },{responseType: 'blob'}) .then((response) => {
                    let contentType = response.headers["content-type"]
                    if(contentType=='application/json;charset=UTF-8'){
                        self.$message.error(decodeURIComponent(response.headers["code-message"]))
                    } else {
                        let blob = new Blob([response.data], {type: response.headers['content-disposition']});
                        let url = window.URL.createObjectURL(blob);
                        let str = response.headers['content-disposition']
                        str = str.match(/''(\S*?).zip/)[1]
                        let fileName = decodeURI(str)+'.zip'
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href = url;
                        downloadElement.download = fileName; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        document.body.removeChild(downloadElement); //下载完成移除元素
                        window.URL.revokeObjectURL(url);

                    }
                    self.downloadStatus = false
                    self.downloadText = '归档下载'
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    };
</script>
<style lang="scss">
    @import "../../../styles/layout/color_variables";
    #marking {
        width: 1200px;
        margin: 20px auto 30px;
        .cascader {
            margin-top: -4px;
        }
        .el-cascader {
            line-height: 30px;
        }
        //查重设置弹出
        .dialog-check {
            p {
                line-height: 60px;
                text-align: center;
            }
            .check-tishi{
                i {
                    padding: 0 10px;
                    font-size: 20px;
                    color: $btn-blue;
                }
            }
            .dialog-b {
                margin-left: -27px;
            }
            .el-dialog__footer {
                text-align: center;
            }
            .short-input {
                width: 80px;
                input {
                    width: 80px;
                }
            }
        }
        .el-radio + .el-radio {
            margin-left: 10px;
        }
        .el-input__icon {
            line-height: 32px;
        }
        .progress-box {
            display: flex;
            justify-content: center;
            align-items: center;
            .progress-line {
                flex: 1;
                margin-right: 10px;
            }
        }

        .el-tooltip__popper{max-width:30%;line-height: 22px;}
        .el-switch__core{
            width: 28px!important;
            height: 16px;
        }
        .el-switch{
        margin-left: 15px;

        }
        .el-switch.is-checked .el-switch__core::after{
        margin-left: -13px;

        }
        .el-switch__core:after{
            width: 12px;
            height: 12px;
        }
    }
</style>
